<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <el-form ref="form" label-width="80px" :model="userInfo" :rules="rules">
      <el-form-item label="登录账号">
        <el-input disabled v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="userInfo.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUser">提交修改</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { updateUserAPI } from '@/api/user'
export default {
  data() {
    // 对表单的验证
    return {
      // 存放用户相关信息，写成一个对象的好处就是在发送请求的时候可以直接将整个对象给请求接口，就不用一个一个写了
      // userInfo: {
      //   // 里面的键写成username，有利于与更新用户信息请求接口的键一致
      //   username: this.$store.state.user.user.username,
      //   nickname: this.$store.state.user.user.nickname,
      //   email: this.$store.state.user.user.email
      // }
      // 由于只有一层，所以也可以使用浅拷贝的方式
      userInfo: { ...this.$store.state.user.user },
      rules: {
        nickname: [
          { required: true, message: '昵称必填', tigger: 'blur' },
          { min: 1, max: 10, message: '请输入1-10位字符', tigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱必填', tigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', tigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    updateUser() {
      // 完整的验证，如果表单的所有内容都通过验证，再发送ajax请求
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const { data: res } = await updateUserAPI(this.userInfo)
        // 如果code===0，就提示修改成功
        if (res.code === 0) {
          // 提示修改成功
          this.$message.success(res.message)
          // 然后再更新一下vuex中的数据
          this.$store.dispatch('user/getUser')
        } else {
          // 修改失败的提示信息
          this.$message.error(res.message)
        }
      })
    },
    // 重置表单
    resetForm() {
      // 下面的代码作用是重置表单（恢复输入框的值为打开页面时的初始值；清除掉表单验证红色的提示）
      // resetFields并不知道你的数据有没有改，他只记得你打开页面时的初始化的值，所以我们还得将vuex中的值再给userInfo一份
      this.$refs.form.resetFields()
      // 从vuex中更新一份数据到当前组件的 userInfo中
      this.userInfo = { ...this.$store.state.user.user }
    }
  }
  // created() {
  //   this.updateUser()
  // }
}
</script>

<style scoped lang="less">
.el-card {
  font-size: 13px;
}
.el-form {
  width: 500px;
  /deep/ .el-form-item__label,
  .el-button {
    font-size: 13px;
  }
}
</style>
